<template>
      <div class="list" ref="wrapper">
         <div>
           <!--当前城市-->
           <div class="list-area">
             <div class="list-name">当前城市</div>
             <ul class="list-city">
               <li class="btn-wrapper">
                 <div class="btn">{{this.$store.state.city}}</div>
               </li>
             </ul>
           </div>
           <!--热门城市-->
           <div class="list-area">
             <div class="list-name">当前城市</div>
             <ul class="list-city">
               <li class="btn-wrapper"
                   v-for="item in hotCities"
                   :key="item.id"
                   @click="cityClick(item.name)"
                   >
                 <div class="btn">{{item.name}}</div>
               </li>
             </ul>
           </div>
           <!--字母索引-->
           <!--点击实现跳转已完成-->
           <div class="list-area"
                v-for="(item,key) in cities"
                :key="key"
                :ref='key'
           >
           <!--将当前的key值赋值给key，然后通过:ref='key进行一个标记'-->
             <div class="list-name">{{key}}</div>
             <ul class="list-letter">
               <li v-for="cap in item">
                 <div class="letter" @click='cityClick(cap.name)'>{{cap.name}}</div>
               </li>
             </ul>
           </div>
         </div>
      </div>
</template>

<script>

    /*引入下拉刷新的依赖包*/
    import Bscroll from 'better-scroll'
    export default {
        name: "List",
        props: {
          hotCities: Array,
          cities: Object,
          letter: String
        },
        methods : {
           cityClick (city) {//热门城市点击事件
               this.$store.dispatch('changeCity',city);
               this.$router.push("/");
           }
        },
      //通过props接收传递过来的值，监听它的变化
     watch: {
        letter () { //监听letter的变化
          if(this.letter){//如果这个字母存在，就...
            const element = this.$refs[this.letter][0];
            this.scroll.scrollToElement(element);
            //scrollToElement 跳转到目标元素
          }
        }
      },
        mounted () {
          this.scroll = new Bscroll(this.$refs.wrapper);
        }
    }
</script>

<style lang="stylus" scoped>
   .list
      overflow : hidden
      position : absolute
      top : .76rem
      left : 0
      rigth : 0
      bottom : 0
     .list-area
         .list-name
           width: 100%
           height:  .4rem
           background : #eee
           line-height : .4rem
           padding-left : .1rem
           color : #666
           border-bottom : 1px solid #ccc
         .list-city
            overflow : hidden
            padding : .05rem .03rem 0.5rem .05rem
            box-sizing : border-box
            .btn-wrapper
                width: 33.3%
                float: left
                .btn
                    width: 1.0rem
                    height .25rem
                    border: 1px solid #ccc
                    color : #666
                    text-align: center
                    line-height : .25rem
                    margin-bottom : .10rem
         .list-letter
            width : 100%
            .letter
                height .4rem
                border-bottom : 1px solid #ccc
                line-height : .4rem
                margin-left : .10rem
</style>
